import Image from "next/image"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function LandingPage() {
  return (
    <main className="min-h-screen flex flex-col">
      {/* 导航栏 */}
      <nav className="bg-white shadow-md p-4 flex justify-between items-center">
        <div className="flex items-center space-x-2">
          <Image src="/images/signature.png" alt="签名认证系统" width={40} height={40} />
          <span className="text-xl font-bold">签名认证系统</span>
        </div>
        <div className="flex items-center space-x-4">
          <Link href="/login">
            <Button variant="outline">登录</Button>
          </Link>
          <Link href="/register">
            <Button>注册</Button>
          </Link>
        </div>
      </nav>

      {/* 英雄部分 */}
      <section className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-6">安全可靠的手写签名认证</h1>
          <p className="text-xl mb-8">使用先进的图像识别技术，保障您的签名安全，防止身份冒用和欺诈行为</p>
          <div className="flex justify-center space-x-4">
            <Link href="/register">
              <Button size="lg" className="bg-white text-blue-700 hover:bg-gray-100">
                立即注册
              </Button>
            </Link>
            <Link href="#features">
              <Button size="lg" variant="outline" className="border-white text-white bg-white/20 hover:bg-white/30">
                了解更多
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* 特性部分 */}
      <section id="features" className="py-16 px-4 bg-white">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">系统特点</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                <Image src="/images/quill-drawing-a-line.png" alt="数据安全" width={30} height={30} />
              </div>
              <h3 className="text-xl font-semibold mb-3">数据安全</h3>
              <p className="text-gray-600">所有签名数据使用高级加密技术保护，确保您的个人信息安全无虞。</p>
            </div>
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
                <svg
                  className="w-6 h-6 text-green-600"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-3">高精度识别</h3>
              <p className="text-gray-600">采用先进的图像处理算法，精确分析签名特征，实现高度准确的认证结果。</p>
            </div>
            <div className="bg-gray-50 p-6 rounded-lg shadow-sm">
              <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                <svg
                  className="w-6 h-6 text-purple-600"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                  <line x1="9" y1="3" x2="9" y2="21" />
                </svg>
              </div>
              <h3 className="text-xl font-semibold mb-3">离线验证</h3>
              <p className="text-gray-600">支持离线签名认证，无需网络连接也能完成身份验证，适用于多种场景。</p>
            </div>
          </div>
        </div>
      </section>

      {/* 工作流程 */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">工作流程</h2>
          <div className="flex flex-col md:flex-row gap-6 justify-between">
            <div className="flex-1 flex flex-col items-center text-center">
              <div className="w-16 h-16 bg-blue-500 text-white rounded-full flex items-center justify-center mb-4 text-2xl font-bold">
                1
              </div>
              <h3 className="text-xl font-semibold mb-3">注册账户</h3>
              <p className="text-gray-600">创建您的个人账户，设置基本信息和安全选项。</p>
            </div>
            <div className="flex-1 flex flex-col items-center text-center">
              <div className="w-16 h-16 bg-blue-500 text-white rounded-full flex items-center justify-center mb-4 text-2xl font-bold">
                2
              </div>
              <h3 className="text-xl font-semibold mb-3">上传签名样本</h3>
              <p className="text-gray-600">上传多个签名样本，系统将分析并建立您的签名特征模型。</p>
            </div>
            <div className="flex-1 flex flex-col items-center text-center">
              <div className="w-16 h-16 bg-blue-500 text-white rounded-full flex items-center justify-center mb-4 text-2xl font-bold">
                3
              </div>
              <h3 className="text-xl font-semibold mb-3">签名认证</h3>
              <p className="text-gray-600">上传待验证签名，系统将与样本比对并给出准确的认证结果。</p>
            </div>
          </div>
        </div>
      </section>

      {/* 页脚 */}
      <footer className="bg-gray-800 text-white py-8 px-4 mt-auto">
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between">
          <div>
            <h3 className="text-xl font-bold mb-4">签名认证系统</h3>
            <p className="text-gray-400">安全可靠的离线签名验证解决方案</p>
          </div>
          <div>
            <h4 className="font-bold mb-3">联系我们</h4>
            <p className="text-gray-400">邮箱: contact@signature-auth.com</p>
            <p className="text-gray-400">电话: 400-123-4567</p>
          </div>
          <div>
            <h4 className="font-bold mb-3">法律信息</h4>
            <ul className="text-gray-400">
              <li>
                <a href="#" className="hover:text-white">
                  隐私政策
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-white">
                  服务条款
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div className="max-w-6xl mx-auto mt-8 pt-4 border-t border-gray-700 text-center text-gray-400">
          <p>© 2025 签名认证系统. 保留所有权利.</p>
        </div>
      </footer>
    </main>
  )
}
